// 获取地址栏的查询参数 'id' 的值
const paramValue = new URLSearchParams(window.top.location.search).get('id');


// 获取好友列表
function fetchFriends() {
    $.post(port + 'friend', { paramValue }, function (data) {
        renderUserList(JSON.parse(data).module); // 解析并渲染好友列表
    });
}

// 初始化聊天(功能已完成,请勿修改)
function initChat(id) {
    $.post(port + 'getname', { paramValue, id }, function (data) {
        const parsedData = JSON.parse(data);
        if (parsedData.code == 200) {
            // 按时间顺序排列消息
            parsedData.module.sort((a, b) => new Date(a.time) - new Date(b.time));
            $('#chatContent').html(''); // 清空聊天内容
            parsedData.module.forEach(msg => {
                const direction = msg.id == paramValue ? 'right' : 'left';
                $('#chatContent').append(`
                    <div class="chat-message-${direction}">
                        <div class="chat-message-avatar-${direction}">
                            <img src='${msg.avatar}' />
                        </div>
                        <div class="chat-message-content-${direction}">
                            <p><span>${msg.name}</span><span class="chat-message-time-${direction}">${msg.time}</span></p>
                            <p class="chat-message-text-${direction}">${msg.message}</p>
                        </div>
                    </div>
                `);
            });
            $('#chatContent').scrollTop($('#chatContent')[0].scrollHeight); // 自动滚动到最底部
        }
    });
}

// 渲染好友列表
function renderUserList(users) {
    const html = users.map(user => `
        <li>
            <b class='notification'></b>
            <p class="userListImg"><img class="userImg" src="${user.avatar}" alt=""></p>
            <p class="userListName"><span class="userName">${user.name}</span><i class="userListId">${user.id}</i></p>
            <p><input value="删除好友" type="button" class="addFriendBtn"></p>
        </li>
    `).join('');
    $('#userList').html(html);

    // 绑定删除好友按钮的点击事件
    $('.addFriendBtn').click(function (e) {
        e.stopPropagation();
        deleteFriend($(this).closest('li').find('.userListId').text());
    });

    // 绑定好友列表项的点击事件
    $('#userList').on('click', 'li', function (e) {
        $(this).find('.notification').css('display', 'none'); // 隐藏提示信息
        const id = $(this).find('.userListId').text();
        initChat(id);
        //连接私聊
        const socket = io(chatport);
        socket.emit('userjoin', paramValue);
        if (!$(e.target).closest('.addFriendBtn').length) {
            //生成聊天框
            $('#userchat').html(`
                <div class="name_box">${$(this).find('.userName').text()}</div>
                <div id="chatContent"></div>
                <div id="chatInput">
                    <p id="chatInputText">
                    <textarea rows="2" id="chatInputTextarea" placeholder="在此输入……" spellcheck="false" data-ms-editor="true"></textarea>
                    <input type="button" id="sendButton" value="发送">
                    </p>
                </div>
            `);

            // 绑定发送按钮的点击事件
            $('#sendButton').click(() => sendMessage(id, socket));
            // 绑定回车键发送消息
            document.onkeydown = function (event) {
                if (event.keyCode == 13) {
                    sendMessage(id, socket)
                }
            }
        }

        // 监听私聊消息
        socket.on('pm', (dataa) => {
            console.log(dataa, id);
            //只渲染自己和当前聊天对象的消息
            if (dataa.data.paramValue != id && dataa.data.to != id) {
                //提示信息
                let idArr = $('#userList li i')
                idArr.each(function (index, item) {
                    if ($(item).text() == dataa.data.paramValue) {
                        $(item).parent().parent().find('.notification').css('display', 'block');
                    }
                });
                //提示声音
                const audio = new Audio('/video/tishisheng.mp3');
                audio.play();
                $('.promptBox').text(dataa.data.name + '发来消息').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
                    $(this).animate({ width: '0', height: '0' }, 1000);
                });
                return;
            }
            const direction = dataa.data.to != paramValue ? 'right' : 'left';
            const div = `
                <div class="chat-message-${direction}">
                    <div class="chat-message-avatar-${direction}">
                        <img src='${dataa.data.avatar}' />
                    </div>
                    <div class="chat-message-content-${direction}">
                        <p><span>${dataa.data.name}</span><span class="chat-message-time-${direction}">${dataa.data.time}</span></p>
                        <p class="chat-message-text-${direction}">${dataa.data.message}</p>
                    </div>
                </div>
            `;
            $('#chatContent').append(div);
            $('#chatContent').scrollTop($('#chatContent')[0].scrollHeight); // 自动滚动到最底部
        });
    });
}
// 屏蔽词
let blocked_keywords = ['操你妈', '滚', '艹', '你妈', 'sb', '傻逼', 'sb', '傻B', '煞笔', '屌']
// 发送消息
function sendMessage(id, socket) {
    const message = $('#chatInputTextarea').val();
    let time = time1();
    // 屏蔽词检测
    for (let i = 0; i < blocked_keywords.length; i++) {
        if (message.indexOf(blocked_keywords[i]) != -1) {
            return $('.promptBox').text('发送内容包含敏感词,请修改后重新发送!!!').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
                $(this).animate({ width: '0', height: '0' }, 1000);
            });
        }
    }
    if (message) {
        // 将消息存入数据库
        $.post(port + 'privatechat', { paramValue, id, message, time }, function (data) {
            const dataa = JSON.parse(data);
            const avatar = dataa.module[0].avatar;
            const name = dataa.module[0].name;
            socket.emit('privateMessage', { to: id, paramValue, message, time, avatar, name });
            $('#chatInputTextarea').val('');
        });
    } else {
        return $('.promptBox').text('发送内容不能为空!!!').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
            $(this).animate({ width: '0', height: '0' }, 1000);
        });
    }
}

// 删除好友
function deleteFriend(id) {
    $.post(port + 'deleteFriend', { paramValue, id }, function (data) {
        if (JSON.parse(data).code === 200) {
            location.reload();
        } else {
            return $('.promptBox').text('删除失败,请稍后再试!!!').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
                $(this).animate({ width: '0', height: '0' }, 1000);
            });
        }
    });
}

// 搜索好友
function search() {
    const searchValue = $('#searchInput').val();
    $.post(port + 'friend', { paramValue }, function (data) {
        renderUserList(JSON.parse(data).module.filter(user => user.name.includes(searchValue)));
    });
}

// 初始加载好友列表
fetchFriends();

// 设置默认没有聊天的样式
$('#userchat').html('<div class="chat-box"><div class="chat-top"><span class="chat-title">当前没有聊天</span></div></div>');
